<template>
    
    <div class="select_class" style="background:#f6f6f6;">
        <header style="margin-bottom:0.3rem;" >
            <a @click="$api.goBack()" class="back"></a>
            <span>{{title}}</span>
            <a class="add" @click="back()" >完成</a>
        </header>
        <div class="row flex"  v-for="(item,index) in showData" style="padding-right:0.3rem;margin-bottom:0.3rem;" >
            <div class="checkbox_wrap"  >
                <span @click="checkedOrUnchecked(index)">
                    <div class="checkbox" :class="{checked:item.checked}" @click="check(index)"></div>
                </span>
            </div>    
            <div class="radio_right">
                <div class="head">
                    <img v-if="item.radioHeadPhoto" :src="$api.formatterImg(item.radioHeadPhoto)" />
                </div>
                <div class="classroom">
                    <div class="className" v-if="item.radioName" >{{item.radioName}}</div>
                    <div class="teacher" v-if="item.radioContent" >{{item.radioContent}}</div>
                </div>
                <div class="right"  >
                    
                </div>
            </div>                   
        </div>
    </div>
    
</template>

<script>
    import checkbox from './checkbox'
    import {
        MessageBox
    } from 'mint-ui';
    export default {
        data() {
            return {
                value: '1',
                title: '',
                multiple: false, //是否允许多选
                showData: [],
            }
        },
        methods: {
            checkedOrUnchecked(index) { //实现单选功能
                if (this.multiple) { //多选无视
                    return;
                }
                if (!this.showData[index].checked) { //拒绝取消选中,取消了再选回来,
                    this.showData[index].checked = !this.showData[index].checked
                } else { //如果不是取消选中,
                    this.$set(this, 'showData', this.showData.map((o, i) => {
                        if (index != i) { //除了要选中的,全部取消掉
                            o.checked = false;
                        }
                        return o;
                    }))
                }
            },
            getOption() {
                var options = JSON.parse(sessionStorage.getItem('radioOptions'));
                this.title = options.title;
                this.showData = options.list;
                if (options.multiple) {
                    this.multiple = options.multiple;
                }
            },
            check(index) {
                if (!this.multiple) {
                    this.showData.forEach(element => {
                        element.checked = false;
                    });
                }
                this.showData[index].checked = !this.showData[index].checked
                console.log(this.showData[index].checked);
            },
            back() {
                var length = 0;
                var list = [];
                this.showData.forEach((element, index) => {
                    if (element.checked) {
                        length = length + 1;

                        if (this.multiple) { //多选
                            list.push(element);
                        } else { //单选
                            var options = {
                                item: element,
                                title: this.title,
                            }
                            sessionStorage.setItem('radioBackOptions', JSON.stringify(options));
                            if (this.title == "选择学校") { //g11的选择学校提示处理
                                this.$router.push({
                                    path: 'g11'
                                })
                                return;
                            }
                            this.$api.goBack();
                        }
                    };
                });
                if (length == 0) {
                    MessageBox('提示', '请选择!');
                } else if (this.multiple) {
                    var options = {
                        item: list,
                        title: this.title,
                    }
                    sessionStorage.setItem('radioBackOptions', JSON.stringify(options));
                    this.$api.goBack();
                }
            }
        },
        created() {
            sessionStorage.removeItem('radioBackOptions'); //清掉数据
            this.getOption();
        },
        components: {
            checkbox,
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>